<template>
  <div class="hello" v-if="false">
    组件A：<br>
    <div class="kuang" >
      模板里获取全局状态：<br>
      <template v-for="(item, key, index) in $state" :key="'aa' + index">
        {{key}}:<br>
        <template v-for="(item, key, index) in item" :key="'aa1' + index">
          &nbsp;&nbsp;{{key}}:{{item}}<br>
        </template><br><br>
      </template>
    </div>
    <div class="kuang" >
      父组件的局部状态1：<br>
      <template v-for="(item, key, index) in state" :key="'aa' + index">
        {{key}}:<br>
        <template v-for="(item, key, index) in item" :key="'aa1' + index">
          &nbsp;&nbsp;{{key}}:{{item}}<br>
        </template><br><br>
      </template>
     </div>
     <div class="kuang" >
      父组件的局部状态2：<br>
      <template v-for="(item, key, index) in state2" :key="'aa' + index">
        {{key}}:<br>
        <template v-for="(item, key, index) in item" :key="'aa1' + index">
          &nbsp;&nbsp;{{key}}:{{item}}<br>
        </template><br><br>
      </template>
    </div>
    <div style="clear:both"></div>

    <input type="button" @click="myClick" value="修改局部状态"/>
    <div style="clear:both"></div>
    <hr>
    <comA1 />
  </div>
</template>

<script>
import comA1 from '../components/comA1'
import Vueds from '../../packages/vue-data-state'

// 演示一下状态的使用
export default {
  name: 'com-a',
  components: {
    comA1
  },
  props: {
    msg: String
  },
  setup() {
    // 注册局部状态
    const { reg } = Vueds.useStore()

    const state = reg.localState()
    state.name = '第一个状态'

    // 定义另一个
    const state2 = reg.localState()
    state2.name = '第二个状态'

    const myClick = () => {
      state.page.pageIndex += 1
      state2.page.pageIndex += 10
      console.log(state)
    }

    return {
      state,
      state2,
      myClick
    }
  }
}
</script>
